import React, { Component } from 'react'
import Tab from "./Tab"
import MySwiper from "../common/MySwiper"
import TabBar from "../common/TabBar"
import Axios from "axios"
import {Icon} from "antd"
import {Link} from "react-router-dom"
export default class Home extends Component {
    constructor(){
        super()
        this.state={
            swiperList:[],
            shopList:[],
            flag:false
        }
    }
    componentDidMount() {
        Axios.post('/swiper', { count: 8 }).then((res) => {
            this.setState({
                swiperList: res.data.list
            })
        })
        Axios.get("/shoplist").then((res) => {
            this.setState({
                shopList: res.data
            })
        })
    }
    render() {
        return (
            <div className="page-home">
                {/* 搜索狂 */}
                <div className="sea">
                    <input type="text" name="" id="" placeholder="输入商家店铺名称"/>
                </div>
                <div className="wrapper">
                    <div className="subject">
                        {/* 吸顶 */}
                        {
                            this.state.flag&&
                            <div className="flush">
                                <div className="title1">猜你喜欢</div>
                                <Tab></Tab>
                                <div className="hot">
                                    <span>年货节热卖</span>
                                    <span>津贴联盟</span>
                                    <span>满减优惠</span>
                                    <span>品质联盟</span>
                                </div>
                            </div>
                        }
                        {/* swiper */}
                        <MySwiper list={this.state.swiperList}></MySwiper>
                        {/* 导航 */}
                        {
                        !this.state.flag&&
                            <div className="flushB">
                                <div className="title1">猜你喜欢</div>
                                <Tab></Tab>
                                <div className="hot">
                                    <span>年货节热卖</span>
                                    <span>津贴联盟</span>
                                    <span>满减优惠</span>
                                    <span>品质联盟</span>
                                </div>
                            </div>
                        }
                        {/* 列表 */}
                        <div className="list">
                            {
                                this.state.shopList.length>0&&
                                this.state.shopList.map((ite,i)=>{
                                    return (
                                        <Link to={{pathname:"/detail",state:{ind:i,obj:ite}}} className="item" key={i}>
                                            <img src={ite.img} alt=""/>
                                            <div className="right">
                                                <h2>{ite.title}</h2>
                                                <p className="p1"><span>★5</span>&nbsp;月售：32</p>
                                                <p className="p2"><span>起送￥40 配送 ￥5</span><span>48分钟 3.2千米</span></p>
                                                <div className="p3">
                                                    <p>
                                                        <span>100-5</span>
                                                        <span>200-10</span>
                                                        <span>津贴1元</span>
                                                        <span>支持自取</span>
                                                    </p>
                                                    <b><Icon type="down" /></b>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                <TabBar></TabBar>
            </div>
        )
    }
}

